<template>
  <!-- 侧边栏 -->
  <el-row class="tac" style="height: auto">
    <el-col>
       <h3
          id="title"
          style="
            font-size: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
          "
        >
          <el-image
            :src="logo"
            fit
            style="width: 50px; height: 50px"
          ></el-image>
          {{ isCollapse ? "" : "东软智疗" }}
        </h3>

      <el-menu
        default-active="0"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        :collapse-transition="False"
      >
       

    
    <el-menu-item-group style="text-align:left">
    <template #title>
       <el-icon><Avatar/></el-icon>
        <span>{{type}}</span>
    </template>
        <el-menu-item
            :index="index.toString()"
            @click="clickmenu(item)"
            v-for="(item, index) in list"
            :key="index"
            style="height: 50px; line-height: 50px;display: flex;justify-content: center;"
          >
          <el-icon>
             <component :is="item.icon" style="width:25px;height:25px"></component>
          </el-icon>
             <template #title>{{item.name}}</template>
          </el-menu-item>
    </el-menu-item-group>
         

      </el-menu>
    </el-col>
  </el-row>
</template>

<script>
import img from "../assets/tubiao.png";
export default {
  props: {
    // 控制侧边栏折叠变量
    isCollapse: {
      type: Boolean,
      default: false,
    },
    // 用户id
    user_id: {
      type: Number,
      default: 0,
    },
    // 侧边栏列表
    list: {
      type: Array,
      default: () => [
        { name: "首页", url: "main", icon: "el-icon-s-home" },
        { name: "我的钱包", url: "mywallet", icon: "el-icon-bank-card" },
        { name: "交易记录", url: "record", icon: "el-icon-time" },
        { name: "基金选购", url: "purchase", icon: "el-icon-goods" },
        { name: "资产配置", url: "asset", icon: "el-icon-set-up" },
        { name: "收益明细", url: "detail", icon: "el-icon-s-marketing" },
      ],
    },
  },
  data() {
    return {
      logo: img,
      userType: {
  
        7001:"挂号收费工作站",
       7002: "医生工作站",
        7003:"医技工作站",
        7004:"药房工作站",
      },
      False: false,
      Avatar: "Avatar",
    };
  },

  computed: {
    type() {
      return this.userType[
        JSON.parse(window.sessionStorage.getItem("userInfo")).userType
      ];
    },
  },
  methods: {
    clickmenu(item) {
      const path = this.$route.path;
      if (path.endsWith(item.url)) {
        this.$message.warning("已经在当前页，无法跳转！");
      } else {
        this.$router.push({
          path: item.url,
          query: { doctorId: this.user_id },
        });
        this.$emit("posttitle", item.name);
      }
    },
  },
};
</script>

<style>

.horizontal-collapse-transition {
  transition: 0s width ease-in-out, 0s padding-left ease-in-out,
    0s padding-right ease-in-out;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;

}
/*隐藏文字*/
  .el-menu--collapse  .el-submenu__title span{
    display: none;
  }
  /*隐藏 > */
  .el-menu--collapse  .el-submenu__title .el-submenu__icon-arrow{
    display: none;
  }
</style>
